<template>
	<div class="login-wraper">
		<div class="login_panel">
			<el-row>
				<el-form :model="formData" :rules="rules" ref="formData">
					<el-col>
						<div style="text-align: center;">
							<h2>PanoEditor全景编辑器</h2>
						</div>
					</el-col>
					<el-col>
						<el-form-item prop="username" label="账号">
							<el-input style="width: 300px" v-model="formData.username" placeholder="请输入账号" prefix-icon="User" />
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="密码" prop="password">
							<el-input type="password" v-model="formData.password" show-password style="width: 300px" placeholder="请输入密码" prefix-icon="Lock" />
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label-width="50">
							<div style="width: 100%; text-align: center;">
							<el-button style="width: 300px;"   type="primary" @click="handleLogin">登录</el-button>
							</div>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
		</div>
	</div>
</template>

<script>
	//import {encrypt,decrypt} from '../../utils/crypto.js';
	import request from '../../utils/request.js';
	export default {
		data() {
			return {
				formData:{
					username:'admin',
					password:'123456'
				},
				rules:{
					"username":[{required:true,message:"请输入登录账号",trigger:'blur'}],
					"password":[{required:true,message:"请输入密码",trigger:'blur'}]
				}
			}
		},
		methods:{
			handleLogin(){
				this.$refs.formData.validate(ok=>{
					if(ok){
						request.post("/api/user/login",this.formData).then(res=>{
							if(res.status==200 && res.data.code){
								localStorage.setItem("token",res.data.data.token);
								localStorage.setItem("userinfo",JSON.stringify(res.data.data.userinfo));
								
								this.$router.push("/res/tour");
								
							}
							console.log(res);
						}).catch(err=>{})
						 
						
						
					}
				})
			}
		}
	}
</script>

<style scoped>
	.login-wraper {
		background: url(../assets/login-bg.png) no-repeat;
		width: 100vw;
		height: 100vh;
	}

	.login_panel {
		position: relative;
		top: 36%;
		transform: translate(58%, -30%);
	}
</style>